<template>
  <PageContainer>
    <view class="container">
      <Header title="举办单位" />
      <view class="organizing-unit-container">
        <view v-for="(item, index) in organizingUnitList" :key="index" class="organizing-unit">
          <TImage
            :src="item.logo"
            width="80rpx"
            height="80rpx"
            mode="widthFix"
            border-radius="8rpx"
          ></TImage>
          <view class="unit-box">
            <text class="orgName text-overflow-1">{{ item.orgName }}</text>
            <view
              v-if="item.tagName"
              class="unit-type"
              :style="{
                backgroundColor: getUnitType(item.activityType)?.background,
                color: getUnitType(item.activityType)?.color,
              }"
            >
              {{ item.tagName }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* organizingUnitList 举办单位 */
  import type { IOrganizingUnit } from '@/api/activity/types';
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { onLoad } from '@/router';
  import TImage from '@/components/TImage/index.vue';
  import { ref } from 'vue';
  import { ActivityTypeEnum } from '@/enums/activityStatusEnum';
  const organizingUnitList = ref<IOrganizingUnit[]>([]);
  onLoad<'organizingUnitList'>((op) => {
    organizingUnitList.value = op.organizingUnitList;
  });

  const getUnitType = (activityType: ActivityTypeEnum) => {
    return {
      [ActivityTypeEnum.oneself]: {
        background: '#2878FF',
        color: '#FFF',
      },
      [ActivityTypeEnum.other_join]: {
        background: '#D0F7FF',
        color: '#2878FF',
      },
    }[activityType];
  };
</script>

<style lang="scss" scoped>
  .container {
    padding: 32rpx;
    .organizing-unit-container {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      .organizing-unit {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 24rpx;
        display: flex;
        align-items: center;
        gap: 16rpx;
        .unit-box {
          display: flex;
          flex-direction: column;
          justify-content: left;
          gap: 8rpx;
          .orgName {
            font-size: 28rpx;
            font-weight: 700;
            line-height: 40rpx;
          }
          .unit-type {
            padding: 4rpx 8rpx;
            font-size: 16rpx;
            line-height: 20rpx;
            border-radius: 4rpx;
            width: fit-content;
          }
        }
      }
    }
  }
</style>
